<template>
	<view class="logistics-container">
		<uv-gap height="10" bgColor="transparent"></uv-gap>
		<view class="bgcf">
			<view class="express">
				<view class="flex">
					<text class="cgreen">{{express_name}} &ensp;</text>
					<text>{{freight_no}}</text>
				</view>
				<uv-button type="primary" size="mini" text="复制" @click="copyTrackingNumber"></uv-button>
			</view>
			
		</view>
		<!-- 物流时间轴 -->
		<view v-if="logisticsData.Traces && logisticsData.Traces.length>0">
			<view class="logistics-timeline">
				<view v-for="(item, index) in logisticsData.Traces" :key="index" class="timeline-item">
					<!-- 时间轴节点 -->
					<view class="timeline-node" :class="{ active: index === 0 }"></view>
					<!-- 时间轴内容 -->
					<view class="timeline-content">
						<view class="logistics-header">
							<span class="status-text"
								:class="{ active: index === 0 }">{{ getStatusText(item.Action) }}</span>
							<span class="time-text">{{ item.AcceptTime }}</span>
						</view>
						<view class="logistics-detail">
							<view>【{{item.Location}}】{{ item.AcceptStation }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="tips">暂未查找到物流信息</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getLogistics
	} from '@/api'
	const freight_no = ref('')
	const express_name = ref('')
	// 复制快递单号
	const copyTrackingNumber = () => {
		navigator.clipboard.writeText(freight_no)
			.then(() => {
				console.log('复制成功');
			})
			.catch(err => {
				console.error('复制失败:', err);
			});
	};
	const status = ref([{
			key: '1',
			value: '已收取快件'
		},
		{
			key: '2',
			value: '运输中'
		},
		{
			key: '202',
			value: '派件中'
		},
		{
			key: '301',
			value: '已签收'
		}
	])
	// 定义方法函数来查找状态文本
	const getStatusText = (key) => {
		const found = status.value.find(item => item.key === key);
		return found ? found.value : '未知状态';
	}

	// 物流数据
	const logisticsData = ref([]);

	const getLogisticsData = async (delivery_id, freight_no) => {
		logisticsData.value = (await getLogistics({
			delivery_id: delivery_id,
			freight_no: freight_no
		})).result
	}

	onLoad((option) => {
		if (option.freight_no) {
			freight_no.value = option.freight_no
			express_name.value = decodeURIComponent(option.refund_express_name)
			getLogisticsData(option.delivery_id, option.freight_no)
		}
	})
</script>

<style lang="scss" scoped>
	.logistics-container {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.bgcf {
		background-color: #fff;
	}
	
	.express {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		font-size: 14px;
		color: #333;
		.cgreen {
			color: #52c41a;
		}
	}

	/* 物流时间轴样式 */
	.logistics-timeline {
		position: relative;
		padding: 20px;
		background-color: #fff;
	}

	.timeline-item {
		position: relative;
		padding-bottom: 20px;
	}

	.timeline-node {
		position: absolute;
		left: -10px;
		top: 5px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #d9d9d9;
		z-index: 1;
	}

	.timeline-node.active {
		background-color: #52c41a;
	}

	.timeline-item:not(:last-child)::after {
		content: '';
		position: absolute;
		left: -4px;
		top: 17px;
		bottom: 0;
		width: 2px;
		background-color: #d9d9d9;
	}

	.timeline-content {
		margin-left: 15px;
	}

	.logistics-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.status-text {
		font-weight: bold;
		color: #333;
	}

	.status-text.active {
		color: #52c41a;
	}

	.time-text {
		font-size: 12px;
		color: #999;
	}

	.logistics-detail {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.mt10 {
		margin-top: 10px;
	}
</style>